<head>

<script type="text/javascript"
	src=" https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript"
	src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script src="../../../public/javascript/jquery.js"
	type="text/javascript"></script>
<script src="../../../public/javascript/scripts.js"
	type="text/javascript"></script>

<script type="text/javascript">
	$(function() {
		javascript:getOrganizers(${orgID});	
	});
</script>
<script type="text/javascript">
	function getOrganizers(orgID) {

		document.getElementById("organizers").innerHTML = "";

		$
				.getJSON(
						'@{Application.getAllOrganizers()}',
						{
							'orgID' : document.getElementById("orgID").value
						},
						function(data) {
	
							s = data.res.split("*");

							var total = "<p><label>Choose organizer to promote</label><select id=\"org\">"
							for ( var i = 1; i < s.length; i = i + 1) {
								if (s[i] != "") {
									total += "<option selected value="+i+">"
											+ s[i] + "</option>"
								}
							}
							total += "</select></p>";
							document.getElementById("organizers").innerHTML = total;
						});

	}
	function resOrganizers(orgID) {

		var index = document.getElementById("org").selectedIndex
		var organizerUsername = document.getElementById("org").options[index].text
		var label ="";
		if (organizerUsername) {
			$.getJSON('@{Application.makeOrganizationLead()}', {
				'orgID' : document.getElementById("orgID").value,
				'organizerUsername' : organizerUsername
			}, function(data) {

				javascript: getOrganizers(document.getElementById(orgID));
			    
			    label="<label>"+organizerUsername+" is now Organization Lead on Oragnization : "+data.org+"</label>";
			    document.getElementById("label").innerHTML=label;
			});

		}

	}
	function testLead(orgID) {
		document.getElementById("organizers").innerHTML = "";
		$.getJSON('@{Application.testLead()}', {
			'orgID' : document.getElementById("orgID").value
		}, function(data) {
			s = data.res.split("*");

			var total = "<p><select id=\"org\">"
			for ( var i = 1; i < s.length; i = i + 1) {
				if(s[i]!=""){
					total += "<option selected value="+i+">" + s[i] + "</option>"
				}
			}
			total += "</select></p>";
			document.getElementById("test").innerHTML = total;
		});
	}
</script>

</head>
<body>
	<div>
		<form name="input" action="#" method="get">
			<a href='#' onclick="javascript:resOrganizers()"> Make
				Organization Lead</a> <a href='#' onclick="javascript:testLead()">Show
				Leads</a>
		</form>
	</div>
	<div>
		<div id="test"></div>
		<div id="organizers"></div>
	</div>
	<div id="label"></div>
	<input id="leadID" type="hidden" value="${leadID}" />
	<input id="orgID" type="hidden" value="${orgID}" />
</body>